<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <link rel="stylesheet" href="css/bootstrap-editable.css">
    <link rel="stylesheet" href="assets/index.css">
    <!--    <script src="assets/index.js"></script>
        <script src="assets/ga.js"></script>-->
    <script src="js/vue1.js"></script>
    <script src="js/axios.js"></script>
    <script src="assets/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min1.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css"/>

    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
    <!-- bootstrap-datetimepicker插件CSS-->

    <!-- Latest compiled and minified JavaScript -->
    <script src="js/bootstrap-table.min.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="js/bootstrap-table-zh-CN.min.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <![endif]-->
    <title>设备列表</title>
    <style>
        *{
            border-right: 0 solid transparent !important;
            border-left: 0 solid transparent !important;

            border-bottom: 0 solid transparent !important;
        }

        table{
            /*white-space:nowrap;*/
            /*overflow: hidden;*/
            overflow: hidden;
            -webkit-line-clamp: 2;
            font-size: 15px;



        }
        tr{
            height: 48px;
        }
        td{
            height: 0px;
        }


        .fixed-table-pagination .pagination-info {
            line-height: 34px;


            text-align: center;
            font-size: 0;

        }
        .nowwrp1{
            overflow: hidden;

            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            width:90px;
            text-align: left;

        }
        .fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner {
            text-align: center;
        }
        .fixed-table-header{
            height: 0px;

        }


    </style>


</head>
<body>
<div class="one" style="text-align: center;white-space: nowrap;margin-bottom: 20px;">
    <input type="text" class="form-control searchResult"  style="display: inline-block;width: 72%;margin-top: 15px;
    border: 0.5px solid #ccc !important;"
           placeholder="请输入设备SN号" onblur="if(this.placeholder==''){this.placeholder='请输入设备SN号'}"
           onfocus="if(this.placeholder=='请输入设备SN号'){this.placeholder=''}" > <button type="button"
           class="btn btn-default search" style=";border-bottom-right-radius: 5px;border-top-right-radius: 5px;
           color: #fff;border:none;background-color: rgb(22, 132, 194);margin-top: -6px;">
    <span class="glyphicon glyphicon-search"></span></button>
</div>
<table id="table"
       data-search="false"
       data-show-toggle="false"
       data-show-export="false"
       data-minimum-count-columns="2"
       data-pagination="true"
       data-id-field="ccuSn"
       data-page-list="[10, 20, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="server"
       data-url="#"
       data-cache="true"
       data-response-handler="responseHandler">
</table>
</body>
<script type="text/javascript">

    var $table = $('#table');
    var  url ="http://cjl3.rokyinfo.net:7110/v1.0/ebike?sidx=id&order=desc";
    var urltoken = parent.location.search;
    var token1;
    token1 = urltoken.substring(7);
      if (token1 != "") {
            sessionStorage.token = token1;
      }

    function initTable() {
//        $table.bootstrapTable("destroy");
        $table.bootstrapTable({
            height:getHeight(),
            url:url,
            method: 'GET',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            cache: false,
            striped: false,
            clickToSelect: true,
            minimumCountColumns: 2,
            ajaxOptions: {
                headers: {
                    "Authorization":sessionStorage.token
                }
            },
            queryParams:queryParams,

            pagination: true,
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 8,                       //每页的记录行数（*）
//            pageList: [5, 20, 50, 100],        //可供选择的每页的行数（*）
            responseHandler: responseHandler,
            columns: [{
                field: 'id',
                title: 'SN号',
                align: 'left',
                valign: 'middle',
                events: operateEvents,
                formatter:idFormatter
            }]

        });
        // sometimes footer render error.
    }


    function queryParams(params) {
        var param = {
            limit: this.pageSize, // 页面大小
            page: this.pageNumber

        };

        return param;
    }
    function responseHandler(res) {
        dataResult = res;
        if (res) {
            return {
                "rows": res.data.list,
                "total": res.data.totalCount
            };
        } else {
            return {
                "rows": 10,
                "total": 20
            };
        }
        console.log(res);
    }

    function idFormatter(value,row,index) {
//        var car =row.online==true?"img/alarm_msg.png":row.online==false?"img/alarm_msg.png"

        if(row.online==true){
            car="img/online_fill.png";

        }
        else if(row.online==false){
            car="img/online.png";

        }
        if(row.online==true&&row.status==0){
            car2="img/status_lock_selected.png";
        }
        else if(row.online==true&&row.status==1){
            car2="img/status_unlock_selected.png";
        }
        else if(row.online==true&&row.status==2){
            car2="img/status_p_selected.png";
        }
        else if(row.online==true&&row.status==3){
            car2="img/status_d_selected.png";
        }
        else if(row.online==true){
            car2="123";
        }

        if(row.online==false&&row.status==0){
            car2="img/status_lock.png";
        }
        else if(row.online==false&&row.status==1){
            car2="img/status_unlock.png";
        }
        else if(row.online==false&&row.status==2){
            car2="img/status_p.png";
        }
        else if(row.online==false&&row.status==3){
            car2="img/status_d.png";
        }
        else if(row.online==false){
            car2="123";
        }




        if(row.ccuSn==sessionStorage.xuanzhe){
            car3="img/ic_selected.png";

        }else {
            car3="img/111.png"
        }
        var inner=row.ccuSn;
        var inner2=row.applicant+"|"+row.createTime+"&nbsp;激活";


        return [

            '<div style="margin-left: 15px;line-height: 24px;width: 80%;float: left">',
            '<div style="width:120px;float: left">',

            '<a  class="SSN" style="text-decoration: none;cursor:pointer;">'+inner+'</a>'+'&nbsp;&nbsp;',
            '</div>',


            '<img  src='+car+' width="15px" height="14px" style="margin-bottom: 2px;margin-left: 5px;"/>',

            '</span>'+'&nbsp;&nbsp;',

            '<img  src='+car2+' width="15px" height="14px" style="margin-bottom: 2px;"/>',
            '</span>',

            '</br>',
            '<span>',
            inner2,
            '</span>',

            '</div>',
            '<div style="float: right">',
            '<img  src='+car3+' width="30px" height="30px" style="margin-top: 10px;margin-left: 2px;"/>',
            '</div>'


        ].join('');

    }

    function getHeight() {
        return $(window).height() - $('h1').outerHeight(true) - $('nav').outerHeight(true)-60 ;
    }
    $(window).resize(function () {
        $table.bootstrapTable('resetView', {
            height:$(window).height() - 10
        });
    });
    var operateEvents = {
        'click .SSN': function (e, value, row, index) {



            sessionStorage.xuanzhe=row.ccuSn;
            console.log(sessionStorage.xuanzhe)
            $table.bootstrapTable("refresh",{silent: true});

            window.parent.warnsn = row.ccuSn;
            window.parent.changesn3();

            window.parent.lon1 = row.lon;
            window.parent.lat1 = row.lat;
            window.parent.pointjump();


            sessionStorage.jingdu = row.lon;
            sessionStorage.weidu = row.lat;
            sessionStorage.shangbao = row.reportTime;
            sessionStorage.chezai = row.bmsSoh-100;
//            var v;
//            if(row.dcuVbat==0){
//                v="0"
//            }
//            else if(row.dcuVbat==3){
//                v="33%"
//            }
//            else if(row.dcuVbat==6){
//                v="66%"
//            }
//            else if(row.dcuVbat==9){
//                v="99%"
//            }
            sessionStorage.neizhi = row.dcuVbat;
            sessionStorage.jizhan = row.dcuGsmRssi;
            sessionStorage.weixing = row.dcuGpsRssi;
            sessionStorage.weizhi = row.lon+row.lat;
            var q;
            if(row.status==0){
               q="设防"
            }
            else if(row.status==1){
                q="撤防"
            }
            else if(row.status==2){
                q="P档"
            }
            else if(row.status==3){
                q="骑行"
            }
            else {
                q="状态不明"
            }
            sessionStorage.zhuangtai=q;

            $.ajax({
                url: "http://cjl3.rokyinfo.net:7110/v1.0/orders?page=1&limit=20&sidx=id&order=desc&belong=1&ccuSn="+row.ccuSn,
                method: "get",
                contentType: "application/json; charset=utf-8",
                cache: false,
                beforeSend: function (xhr) {
                    /* Authorization header */
                    xhr.setRequestHeader("Authorization", sessionStorage.token);
                },

                success: function (res) {
                    console.log(res);
                    sessionStorage.Sn=res.data.list[0].ccuSn;



                    sessionStorage.riqi1=res.data.list[0].buyTime;
                    sessionStorage.pinpai=res.data.list[0].brand;
                    sessionStorage.xinghao=res.data.list[0].model;
                    sessionStorage.chejia=res.data.list[0].vin;
                    sessionStorage.jinee=res.data.list[0].buyPrice;
                    sessionStorage.invoice=res.data.list[0].billImg;
                    if(res.data.list[0].city==null||res.data.list[0].city=="null"){
                        var ssq2=res.data.list[0].province
                    }
                    else if(res.data.list[0].district==null||res.data.list[0].district=="null"){
                        var ssq2=res.data.list[0].province+res.data.list[0].city
                    }else {
                        var ssq2=res.data.list[0].province+res.data.list[0].city+res.data.list[0].district
                    }
                    sessionStorage.shengshi=ssq2;
                    sessionStorage.carpic2=res.data.list[0].scooterImg[1];
                    sessionStorage.carpic1=res.data.list[0].scooterImg[0];
                    sessionStorage.xingming=res.data.list[0].applicant;
                    sessionStorage.shenfen=res.data.list[0].idNumber;
                    sessionStorage.shouji=res.data.list[0].phoneNumber;

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("失败")
                    console.log(jqXHR);
                }
            });
            $.ajax({
                url: "http://cjl3.rokyinfo.net:7110/v1.0/ebike?page=1&limit=20&sidx=id&order=desc&ccuSn="+row.ccuSn,
                method: "get",
                contentType: "application/json; charset=utf-8",
                cache: false,
                beforeSend: function (xhr) {
                    /* Authorization header */
                    xhr.setRequestHeader("Authorization", sessionStorage.token);
                },

                success: function (res) {
                    console.log(res);
                    sessionStorage.daoqi=res.data.list[0].simValidityTime;

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("失败")
                    console.log(jqXHR);
                }
            });



//            window.parent.rightFrame.location.reload();

        }
    };
    initTable();



    $(".search").on("click",function () {

            var url="http://cjl3.rokyinfo.net:7110/v1.0/ebike?page=1&limit=20&sidx=id&order=desc&ccuSn="+$(".searchResult").val()

        $.ajax({
            url: url,
            method: "get",
            contentType: "application/json; charset=utf-8",
            cache: false,
            beforeSend: function (xhr) {
                /* Authorization header */
                xhr.setRequestHeader("firm", sessionStorage.flag);
                xhr.setRequestHeader("Authorization", sessionStorage.token);
            },
            success: function (res) {
                $("#table").bootstrapTable('refresh',{'url':"http://cjl3.rokyinfo.net:7110/v1.0/ebike?page=1&limit=20&sidx=id&order=desc&ccuSn="+$(".searchResult").val()});

                window.parent.lon1 = res.data.list[0].lon;
                window.parent.lat1 = res.data.list[0].lat;
                window.parent.pointjump()
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("失败")
                console.log(jqXHR);
            }
        });


    });



</script>


</html>
